<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item > {{ $t('layout.aside.photographArea') }}  </t-breadcrumb-item>
        <t-breadcrumb-item > {{ $t('layout.aside.photographType')  }}</t-breadcrumb-item>
      </t-breadcrumb>

      <t-button @click="addShow" size="small">{{ $t('common.button.add') }}</t-button>
      <t-dialog v-model:visible="visible" width="30%" :cancelBtn="$t('common.button.cancel')" :header="bType=='add'?$t('common.button.add'):$t('common.button.edit')" :confirmBtn="$t('common.button.confirm')" 
      @confirm="confirm ">
        <t-form colon>
            <t-form-item :label="$t('photograph.type.type')" >
                <t-input  v-model="data.name" clearable :placeholder="$t('common.input.name')"></t-input>
                </t-form-item>
        </t-form>
    </t-dialog>

    <t-table  style="margin-top: 10px;" row-key="index" :data="datas" :columns="columns">
        <template #creationTime="{ row }">
            {{row.creationTime.replace('T',' ').substr(0,19)}}
        </template>
        <template #operation="{ row }">
            <t-button size="small" theme='primary' @click="editShow(row)">
                {{$t('common.button.edit')}}
            </t-button>
      </template>
    </t-table>
</template>

<script setup lang="jsx">
import {ref} from 'vue'
import api from '../api';
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = ref([
    {colKey:'name',title:t('common.name')},
    {colKey:'creationTime',title:t('common.creationTime')},
    {colKey: 'operation',title:t('common.operation')}
])

const datas = ref([])
const confirm = ()=>{
    if(bType.value == 'add'){
        addConfirm()
    }else{
        editConfirm()
    }
}
const addConfirm = ()=>{
    if(data.value.name != ''){
        api.addPhotographType(data.value).then(res=>{
            if(res.successed){
                visible.value = false
                    getTypes()
                MessagePlugin.success({content:res.message,duration:800})
            }
        })
    }
}
const editConfirm = ()=>{
    if(data.value.name != ''){
        api.editPhotographType(data.value).then(res=>{
            if(res.successed){
                let index = datas.value.findIndex(item=>item.id == data.value.id)
                datas.value[index] = data.value
                visible.value = false
                MessagePlugin.success({content:res.message,duration:800})
            }
        })
    }
}

const data = ref({})
const visible = ref(false)
const bType = ref('add')
const addShow = ()=>{
    bType.value = 'add'
    data.value = {name:''}
    visible.value  =true
}
const editShow=(row)=>{
    bType.value = 'edit'
    data.value = JSON.parse(JSON.stringify(row))
    visible.value = true
}

const getTypes = ()=>{
    api.getPhotographTypes().then(res=>{
        if(res.successed){
            datas.value = res.datas
        }
    })
}
getTypes()

</script>